{% load i18n %}

<div class="review-comment mb-3 p-3 border rounded" data-comment-id="{{ comment.id }}">
    <div class="d-flex justify-content-between align-items-center mb-2">
        <strong>{{ comment.user.username }}</strong>
        <small class="text-muted">{{ comment.created_at|date:"Y-m-d H:i" }}</small>
    </div>
    <p class="mb-0">{{ comment.content }}</p>

    {% if user.is_authenticated %}
    <div class="review-comment-actions mt-2">
        <button type="button" class="btn btn-sm btn-outline-secondary reply-review-comment-btn" data-comment-id="{{ comment.id }}">{% trans "Reply" %}</button>
        <button type="button" class="btn btn-sm {% if comment.user_likes %}btn-warning{% else %}btn-outline-success{% endif %} like-review-comment-btn" data-comment-id="{{ comment.id }}" data-liked="{% if comment.user_likes %}true{% else %}false{% endif %}">
            {% if comment.user_likes %}<i class="bi bi-hand-thumbs-down"></i> {% trans "Unlike" %}{% else %}<i class="bi bi-hand-thumbs-up"></i> {% trans "Like" %}{% endif %}
        </button>
        <span class="like-count">{{ comment.likes.count }}</span>

        <button type="button" class="btn btn-sm {% if comment.user_favorites %}btn-outline-danger{% else %}btn-outline-info{% endif %} favorite-review-comment-btn" data-comment-id="{{ comment.id }}" data-favorited="{% if comment.user_favorites %}true{% else %}false{% endif %}">
            {% if comment.user_favorites %}<i class="bi bi-heartbreak"></i> {% trans "Unfavorite" %}{% else %}<i class="bi bi-heart"></i> {% trans "Favorite" %}{% endif %}
        </button>
        <span class="favorite-count">{{ comment.favorites.count }}</span>
    </div>
    <div class="reply-review-comment-form-container mt-2" id="reply-review-comment-form-{{ comment.id }}" style="display:none;">
        <textarea class="form-control mb-2" rows="2" placeholder="{% trans 'Write your reply...' %}" id="reply-review-comment-content-{{ comment.id }}"></textarea>
        <button type="button" class="btn btn-primary btn-sm submit-review-reply-btn" data-parent-id="{{ comment.id }}">{% trans "Post Reply" %}</button>
    </div>
    {% endif %}

    {% if comment.all_replies %}
    <div class="review-comments-list mt-3" id="review-comments-list-{{ comment.id }}">
        {% for reply in comment.all_replies %}
            {% include 'catalog/review_comment_snippet.html' with comment=reply user=user %}
        {% endfor %}
    </div>
    {% endif %}
</div> 